// 源插件
import React, { Fragment, PureComponent } from 'react';
import { DateDiff, DateStamp, FormatnumberZero, Mover, NumberDivide } from '@/function.js';

// 视图插件
import { Button, Card, Divider, Form, message, notification, Switch } from 'antd';

// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
import AddAQDQ from './AddAQDQ';
import UpdateAQDQ from './UpdateAQDQ';
import ExportJsonExcel from '@/components/XLSXOUT/js-export-excel-custom';
// css OR less预编译器

// 图片

/**
 *  Describe:数据连接
 */

@connect(({ aqdq, loading }) => ({
  aqdq,
  loading: loading.models.aqdqRule,
}))
@Form.create()
class AQDQ extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSource: {
      data: [],
      total: [],
      code: 0,
    },
    addVisible: false,
    updateVisible: false,
    row: {},
  };

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    dispatch({
      type: 'aqdq/GetAQDQ',
      callback: res => {
        that.setState({
          dataSource: {
            title: 'AQDQ风控',
            code: 1,
            data: res.list,
            total: ['open'],
            columns: [
              {
                title: '类型',
                dataIndex: 'type',
                type: 'string',
                fixed: 'left',
                width: 70,
                filters: [
                  {
                    text: 'AQ',
                    value: 'AQ',
                  },
                  {
                    text: 'DQ',
                    value: 'DQ',
                  },
                ],
              },
              {
                title: '股票',
                dataIndex: 'code',
                type: 'string',
                fixed: 'left',

                search: true,
              },
              {
                title: '银行',
                dataIndex: 'bank',
                width: 75,
                fixed: 'left',

                type: 'string',
                filters: [
                  {
                    text: '瑞银',
                    value: '瑞银',
                  },
                  {
                    text: '中银',
                    value: '中银',
                  },
                  {
                    text: '花旗',
                    value: '花旗',
                  },
                  {
                    text: '摩根',
                    value: '摩根',
                  },
                ],
              },
              {
                title: '瑞银',
                dataIndex: 'ubsNum',
                type: 'number',
                width: 70,
                sorter: true,
              },
              {
                title: '花旗',
                dataIndex: 'cpbNum',
                type: 'number',
                width: 70,
                sorter: true,
              },
              {
                title: '保证',
                dataIndex: 'preNum',
                type: 'number',
                width: 70,
                sorter: true,
              },
              {
                title: '参考价',
                dataIndex: 'referencePrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '折扣',
                type: 'number',
                dataIndex: 'discount',
                sorter: true,
                render: (value, row, index) => {
                  return value === null ? null : (
                    <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                  );
                },
              },
              {
                title: '每日股数',
                width: 70,
                dataIndex: 'normalNums',
                type: 'number',
                sorter: true,
              },
              {
                title: '开始日期',
                dataIndex: 'sdate',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '结束日期',
                dataIndex: 'edate',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '执行价',
                dataIndex: 'strike',
                type: 'number',
                sorter: true,
              },
              {
                title: 'KO价',
                dataIndex: 'ko',
                type: 'number',
                sorter: true,
              },
              {
                title: '现价',
                dataIndex: 'nowPrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '距执幅度',
                dataIndex: 'toStrikeRate',
                width: 75,
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  let color = 'rgba(0,0,0,0)';
                  if (row.type === 'AQ') {
                    if (value < 0.015 && value > 0) {
                      color = 'rgba(255,192,0)';
                    }
                    if (value < 0) {
                      color = '#ff5d5f';
                    }
                  }
                  if (row.type === 'DQ') {
                    if (value > -0.015 && value <= 0) {
                      color = 'rgba(255,192,0)';
                    }
                    if (value > 0) {
                      color = '#ff5d5f';
                    }
                  }
                  return (
                    <div
                      style={{
                        backgroundColor: color,
                        margin: '-11px',
                        borderBottom: '7px solid',
                        borderBottomColor: color,
                        borderTop: '7px solid',
                        borderTopColor: color,
                      }}
                    >
                      <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                    </div>
                  );
                },
              },
              {
                title: '距KO幅度',
                dataIndex: 'toKoRate',
                width: 75,
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  let color = 'rgba(0,0,0,0)';
                  if (row.type === 'DQ') {
                    if (value < 0.01 && value > 0) {
                      color = 'rgba(255,192,0)';
                    }
                    if (value < 0) {
                      color = '#ff5d5f';
                    }
                  }
                  if (row.type === 'AQ') {
                    if (value > -0.01 && value <= 0) {
                      color = 'rgba(255,192,0)';
                    }
                    if (value > 0) {
                      color = '#ff5d5f';
                    }
                  }
                  return (
                    <div
                      style={{
                        backgroundColor: color,
                        margin: '-11px',
                        borderBottom: '7px solid',
                        borderBottomColor: color,
                        borderTop: '7px solid',
                        borderTopColor: color,
                      }}
                    >
                      <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                    </div>
                  );
                },
              },
              {
                title: '执行股',
                dataIndex: 'strickNumb',
                type: 'number',
                sorter: true,
              },
              {
                title: '未执行',
                dataIndex: 'unStrickNumb',
                type: 'number',
                sorter: true,
                width: 70,
              },
              {
                title: '冻结',
                dataIndex: 'freeze',
                type: 'number',
                sorter: true,
                width: 70,
              },
              {
                title: '敞口(万)',
                dataIndex: 'open',
                type: 'number',
                sorter: true,
                width: 90,
                render: (value, row, index) => {
                  return <div>{NumberDivide(value, 2)}</div>;
                },
              },
              {
                title: '现价敞口(万)',
                dataIndex: 'nowPriceOpen',
                type: 'number',
                sorter: true,
                width: 70,
                render: (value, row, index) => {
                  return <div>{NumberDivide(value, 2)}</div>;
                },
              },
              {
                title: '实际结束',
                dataIndex: 'realEndDate',
                type: 'date',
                sorter: true,
                width: 90,
                render: (value, row, index) => {
                  if (!value) return null;
                  return (
                    <div
                      style={{
                        backgroundColor: '#ff5d5f',
                        margin: '-11px',
                        borderBottom: '7px solid',
                        borderBottomColor: '#ff5d5f',
                        borderTop: '7px solid',
                        borderTopColor: '#ff5d5f',
                      }}
                    >
                      <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>
                    </div>
                  );
                },
              },
              {
                title: '状态',
                dataIndex: 'realEndDateType',
                type: 'string',
                filters: [
                  {
                    text: '已结束',
                    value: '已结束',
                  },
                  {
                    text: '今日结束',
                    value: '今日结束',
                  },
                  {
                    text: '未结束',
                    value: '未结束',
                  },
                ],
                defaultFilteredValue: ['今日结束', '未结束'],
              },
              {
                title: '操作',
                render: (text, record) => {
                  if (record.type === '合计') {
                    return null;
                  }
                  return (
                    <Fragment>
                      <a onClick={() => this.openUpdateVisible(record)}>修改</a>
                      <Divider type="vertical" />
                      <a onClick={() => this.deleteThis(record)}>删除</a>
                    </Fragment>
                  );
                },
              },
            ],
          },
        });
      },
    });
  }

  openAddVisible() {
    this.setState({
      addVisible: true,
    });
  }

  closeAddVisbile() {
    const that = this;
    this.setState(
      {
        addVisible: false,
      },
      () => {
        that.dataSourceChange();
      }
    );
  }

  openUpdateVisible(row) {
    this.setState({
      row,
      updateVisible: true,
    });
  }

  closeUpdateVisbile() {
    const that = this;
    this.setState(
      {
        updateVisible: false,
      },
      () => {
        that.dataSourceChange();
      }
    );
  }

  deleteThis(row) {
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: 'aqdq/DelAQDQ',
      payload: { id: row.id },
      callback: res => {
        that.dataSourceChange();
      },
    });
  }

  refreshControl = (checked, ev) => {
    const that = this;
    // console.log(checked, 'checked')
    // this.setState({ autoRefrsh: checked })
    if (checked) {
      window.interval4 = setInterval(() => {
        message.success('AQDQ刷新');
        that.dataSourceChange();
      }, 50000);
    } else {
      clearInterval(window.interval4);
    }
  };

  sheetItem(dataInfos, dataInfosColumns, sheetName) {
    let res = {};
    const infosTable = [];
    const infosFilter = [];
    const sheetHeader = [];
    const sheetWidth = [];
    if (dataInfosColumns) {
      for (const j in dataInfosColumns) {
        const item = dataInfosColumns[j];
        infosFilter.push(item.title);
        sheetHeader.push(item.title);
        sheetWidth.push({ wpx: 100 });
      }
    }
    if (dataInfos) {
      for (const i in dataInfos) {
        const dataInfosItem = dataInfos[i];
        if (dataInfos) {
          const obj = {};
          for (const j in dataInfosColumns) {
            const cItem = dataInfosColumns[j];
            if (cItem.dataIndex === 'sellType') {
              obj[cItem.title] = { 2: 'Sell Call', 1: 'Sell Put', 3: 'Buy Put', 4: 'Buy Call' }[
                dataInfosItem[cItem.dataIndex]
              ];
            } if (cItem.dataIndex === 'open'||cItem.dataIndex === 'nowPriceOpen') {
              obj[cItem.title] = mathService.sub(dataInfosItem[cItem.dataIndex],10000)
            } else{
              obj[cItem.title] = dataInfosItem[cItem.dataIndex];
            }

          }

          infosTable.push(obj);
        }
      }
    }
    res = {
      sheetData: infosTable,
      sheetName,
      sheetFilter: infosFilter,
      sheetHeader,
      columnWidths: sheetWidth,
    };
    return res;
  }

  outXlsx() {
    const { dataSource } = this.state;
    const option = {
      fileName: 'AQDQ风控导出',
      datas: [],
    };
    option.datas.push(this.sheetItem(dataSource.data, dataSource.columns, dataSource.title));
    const toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  }

  render() {
    const { addVisible, updateVisible, row, dataSource } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <div style={{ display: 'flex', alignItems: 'center', marginRight: '30px' }}>
            <div style={{ marginRight: '10px' }}>自动刷新</div>
            <Switch
              checkedChildren="开"
              unCheckedChildren="关"
              onChange={this.refreshControl.bind(this)}
            />
          </div>
          <br />
          <Button onClick={this.openAddVisible.bind(this)}>添加</Button>
          <Button type="primary" style={{ marginLeft: 25 }} onClick={this.outXlsx.bind(this)}>
            导出XLSX
          </Button>
          <br />
          <br />
          <StandardTablePro dataSource={dataSource} />
          <AddAQDQ closeVisbile={this.closeAddVisbile.bind(this)} visible={addVisible} />
          <UpdateAQDQ
            closeVisbile={this.closeUpdateVisbile.bind(this)}
            visible={updateVisible}
            row={row}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    const that = this;
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default AQDQ;
